<template>
  <div id="addressList">
    <van-nav-bar title="选择地址" left-arrow @click-left="onClickLeft" />
    <van-address-list :list="addressList" @add="onAdd" @select="onSelect" />
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "addressList",
  data() {
    return {
      addressList: [],
      shop: [],
      price: this.$route.query.price,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onAdd() {
      this.$router.push("/addAddress");
    },
    onSelect(item, index) {
      this.$router.push({
        path: "/confirmOrder",
        query: {
          id: this.shop.id,
          price: this.price,
          index: index + 1,
        },
      });
    },
  },
  created() {
    axios.get("/api/shop/shop?id=" + this.$route.query.id).then((response) => {
      this.shop = response.data.data;
    });
    axios.get("/api/address/addressList").then((response) => {
      this.addressList = response.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
>>> .van-nav-bar {
  background: #42a5f3;
  color: #fff;
  .van-icon,
  .van-nav-bar__title {
    color: #fff;
  }
}
>>> .van-radio__icon {
  display: none;
}
>>> .van-button--danger {
  background-color: #42a5f3;
  border: 1px solid #42a5f3;
}
</style>